<script setup lang="jsx">
import { ref, watch } from 'vue';
import { useAntdForm, useFormRules } from '@/hooks/common/form';
import { addDept, updateDept } from '@/service/api';

const props = defineProps({
  deptOptions: {
    type: Array,
    default: () => []
  },
  currentRow: {
    type: Object,
    default: () => null
  },
  operateType: {
    type: String,
    default: () => null
  }
});

const emit = defineEmits(['success']);

const { formRef, validate, resetFields } = useAntdForm();
const { createRequiredRule, patternRules } = useFormRules();
const rules = {
  parentId: createRequiredRule('请选择上级部门'),
  deptName: createRequiredRule('请输入部门名称'),
  orderNum: createRequiredRule('请输入显示顺序'),
  email: patternRules.email,
  phone: patternRules.phone
};
const replaceFields = {
  children: 'children',
  label: 'deptName',
  key: 'deptId',
  value: 'deptId'
};

const model = ref({
  parentId: null,
  deptName: null,
  orderNum: null,
  leader: null,
  phone: null,
  email: null,
  status: '0'
});

async function submitForm() {
  if (!props.operateType) return;
  await validate();
  let pro;
  if (props.operateType === 'edit') {
    pro = updateDept({
      deptId: props.currentRow.deptId,
      ...model.value
    });
  } else {
    pro = addDept(model.value);
  }
  pro.then(({ error }) => {
    if (!error) {
      window?.$message?.success('操作成功!');
      emit('success');
    }
  });
}

watch(
  () => props.currentRow,
  val => {
    if (val) {
      const { parentId, deptName, orderNum, leader, phone, email, status } = val;
      if (props.operateType === 'edit') {
        model.value = {
          parentId: `${parentId}`,
          deptName,
          orderNum,
          leader,
          phone,
          email,
          status
        };
      }
    } else {
      model.value = {
        parentId: null,
        deptName: null,
        orderNum: null,
        leader: null,
        phone: null,
        email: null,
        status: '0'
      };
    }
    if (props.operateType === 'addChild') {
      model.value.parentId = `${val.deptId}`;
    }
  },
  {
    deep: true,
    immediate: true
  }
);

defineExpose({
  submitForm
});
</script>

<template>
  <AForm ref="formRef" :model="model" :rules="rules" :label-col="{ lg: 8, xs: 4 }" label-wrap>
    <ARow :gutter="20">
      <ACol v-if="model.parentId != 0" :lg="24" :xs="24">
        <AFormItem name="parentId" label="上级部门" :label-col="{}">
          <ATreeSelect
            v-model:value="model.parentId"
            show-search
            :dropdown-style="{ maxHeight: '400px', overflow: 'auto' }"
            placeholder="请选择上级部门"
            allow-clear
            tree-default-expand-all
            :tree-data="props.deptOptions"
            :replace-fields="replaceFields"
          ></ATreeSelect>
        </AFormItem>
      </ACol>
      <ACol :lg="12" :xs="24">
        <AFormItem name="deptName" label="部门名称" :label-col="{}">
          <AInput v-model:value="model.deptName" placeholder="请输入部门名称" autocomplete="off"></AInput>
        </AFormItem>
      </ACol>
      <ACol :lg="12" :xs="24">
        <AFormItem name="orderNum" label="显示顺序" :label-col="{}">
          <AInputNumber
            v-model:value="model.orderNum"
            placeholder="请输入显示顺序"
            class="w-full"
            autocomplete="off"
          ></AInputNumber>
        </AFormItem>
      </ACol>
      <ACol :lg="12" :xs="24">
        <AFormItem name="leader" label="负责人" :label-col="{}">
          <AInput v-model:value="model.leader" placeholder="请输入负责人" autocomplete="off"></AInput>
        </AFormItem>
      </ACol>
      <ACol :lg="12" :xs="24">
        <AFormItem name="phone" label="联系电话" :label-col="{}">
          <AInput v-model:value="model.phone" placeholder="请输入联系电话" autocomplete="off"></AInput>
        </AFormItem>
      </ACol>
      <ACol :lg="12" :xs="24">
        <AFormItem name="email" label="邮箱地址" :label-col="{}">
          <AInput v-model:value="model.email" placeholder="请输入邮箱地址" autocomplete="off"></AInput>
        </AFormItem>
      </ACol>
      <ACol :lg="12" :xs="24">
        <AFormItem name="status" label="部门状态" :label-col="{}">
          <ARadioGroup v-model:value="model.status">
            <ARadio value="0">正常</ARadio>
            <ARadio value="1">停用</ARadio>
          </ARadioGroup>
        </AFormItem>
      </ACol>
    </ARow>
  </AForm>
</template>

<style></style>
